<template>
  <div class="plan-management-popup-box">
    <!-- 列别内容 -->
    <div class="list-box bigTableStyle">
      <el-table
      border
        :data="newSecondData"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        style="width: 100%;height:100%;"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="BDZMC" label="变电站名称"></el-table-column>
        <el-table-column prop="JHMC" label="子计划名称"></el-table-column>
        <el-table-column prop="SFULLJHKSSJ" label="执行时间"></el-table-column>
      </el-table>
    </div>
    <!-- 日期选择 -->
    <table />
    <div class="date-box">
      <div class="text centerbox">
        <span>调整巡检变电站巡检开始日期至：</span>
      </div>
      <div class="date-select">
        <el-date-picker
          v-model="formData.inceptiontime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
    </div>
    <!-- 调整原因 -->
    <div class="edit-cause-box">
      <div class="text">
        <span>调整原因：</span>
      </div>
      <div class="input-box">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows:4}"
          placeholder="请输入内容"
          v-model="formData.reason"
        ></el-input>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btn-box centerbox">
      <el-button type="primary" @click="operate" class="save-btn centerbox">保存并下发</el-button>
      <el-button type="primary" @click="cancel" class="cancel-btn centerbox">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Row, Table } from "element-ui";
// 表格隔行变色的参数
export interface objType {
  row: object;
  rowIndex: number;
}
@Component
export default class extends Vue {
  /**
   * tableSelect最好定义类型，这样只有在上级页面传过来的是一个数组，
   * 这里才会接受，相当于监听，否则如果在mounted里接受这个变量的时候可能会为空
   */

  @Prop({ default: () => [] })
  tableSelect!: any[];
  textarea: string = "";
  //搜索框from表单数据
  formData = {
    inceptiontime: "", // 调整巡检开始日期
    reason: "", // 调整原因
  };
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  // 纯提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }
  // 带按钮的提示消息
  private totastBtn(msg: string) {
    this.$confirm(msg, "确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info",
    })
      .then(() => {
        // 确定
      })
      .catch(() => {
        // 取消
      });
  }
  // 加载中
  private loading(str: string) {
    let loading = this.$loading({
      lock: true,
      text: str,
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    setTimeout(() => {
      loading.close();
    }, 2000);
  }
  multipleSelection: any = [];
  handleSelectionChange(val: any) {
    // console.log("val:",val);
    this.multipleSelection = val;
  }
  // 操作
  operate() {
    // czlx操作类型，计划调整：jhtz，计划取消:jhqx
    // console.log("保存1111:", this.formData);
    // console.log("保存2222:", this.newSecondData);
    // console.log("保存3333:", this.tableSelect);

    var bz = this.formData;
    if (bz.reason == "") {
      this.totast("调整原因不能为空！");
      return;
    }
    let rq = this.newSecondData[0].SFULLJHKSSJ;
    // var rq = $("#jhtzsj").combobox("getText");
    var selJhids = new Array();
    if (this.tableSelect[0].XSLX == "1") {
      // rq = $("#jhzxsj").combobox("getText");
      let date = rq.split("-");
      let days = date[2].split(" ");
      let full = days[1].split(":");
      let zxc = new Date(
        date[0],
        date[1] - 1,
        days[0],
        full[0],
        full[1],
        full[2]
      );
      // if (zxc <= new Date()) {
      //   this.totast("执行时间必须大于当前时间！");
      //   return;
      // }
      if (this.newSecondData[0].SSHORTJHKSSJ == this.formData.inceptiontime) {
        this.totastBtn(
          "执行时间未做任何调整，系统不会进行保存和下发，是否继续编辑？"
        );
        return;
      }
    }
    // else {
    //   $("input[type=checkbox]:checkbox:checked").each(function () {
    //     selJhids.push($(this).val());
    //   });
    //   if (mstatus == "1") {
    //     if (initSeledJhidLength == selJhids.length) {
    //       this.totastBtn('子计划未做任何调整，系统不会进行保存和下发，是否继续编辑？');
    //       return;
    //     }
    //   } else {
    //     var full = rq.split("-");
    //     var zxc = new Date(full[0], full[1] - 1, full[2], 0, 0, 0);
    //     if (zxc < new Date()) {
    //       this.totast("巡检开始日期必须大于当前日期！");
    //       return;
    //     }
    //     if (initSeledJhidLength == selJhids.length && initRq == rq) {
    //       this.totastBtn('子计划以及巡检开始日期未做任何调整，系统不会进行保存和下发，是否继续编辑？');
    //       return;
    //     }
    //   }
    // }
    let loading = this.$loading({
      lock: true,
      text: "系统加载中，请稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    this.loading("系统加载中，请稍后...");
    // console.log("this.newSecondData:",this.newSecondData);
    this.multipleSelection.map((v:any,i:any) => {
      let form = {
        bz: this.formData.reason,
        jhid: this.tableSelect[0].ID,
        selJhids: v.JHID,
        xslx: this.tableSelect[0].XSLX,
        zxrq: this.formData.inceptiontime,
      };
      // console.log("form:",form);
      // 计划调整保存
      (this as any).$services
        .getplanChange({
          method: "get",
          data: form,
        })
        .then((result: any) => {
          // console.log("计划调整保存回调:", result);
          if (result.success) {
            if (result.data.close == "true") {
              this.totastBtn(result.data.msg);
            } else {
              this.totastBtn(result.data.msg);
            }
            this.cancel();
          } else {
            this.totast("保存和下发异常，请稍后重试!");
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    });
  }
  cancel() {
    this.$emit("handleClose");
    // console.log("取消");
  }
  private secondData = [];
  $refs!: {
    multipleTable: Table;
  };
  get newSecondData() {
    // console.log("this.secondData1111111111:",this.secondData)
    let secondData = this.secondData;
    if (secondData.length) {
      this.formData.inceptiontime = secondData[0].SSHORTJHKSSJ;
      let multipleTable = this.$refs.multipleTable;
      if (multipleTable) {
        multipleTable.toggleAllSelection();
      }
    }
    return secondData;
  }
  private init() {
    // console.log("this.tableSelect:", this.tableSelect);
    // 获取计划调整二级页面内容
    (this as any).$services
      .getSubPlanByJhid({
        method: "get",
        data: { jhid: this.tableSelect[0].ID, xslx: this.tableSelect[0].XSLX },
      })
      .then((result: any) => {
        // console.log("计划调整二级页面内容:", result);
        this.secondData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  mounted() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.plan-management-popup-box {
  width: 100%;
  height: 100%;
  .list-box {
    height: 2.22rem;
  }
  .date-box {
    height: 0.36rem;
    margin-top: 0.3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .text {
      height: 0.36rem;
      width: 2.8rem;
      span {
        font-size: 0.18rem;
      }
    }
    .date-select {
      height: 0.36rem;
      width: 2rem;
      span {
        font-size: 0.18rem;
      }
    }
  }
  .edit-cause-box {
    height: 0.95rem;
    margin-top: 0.22rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .text {
      width: 0.94rem;
      height: 100%;
      span {
        font-size: 0.18rem;
      }
    }
    .input-box {
      width: 6.95rem;
      height: 100%;
      font-size: 0.18rem;
      .el-textarea {
        overflow: auto;
        .el-textarea__inner::-webkit-scrollbar {
          width: 10px;
          height: 10px;
        }
        .el-textarea__inner::-webkit-scrollbar-thumb {
          background: #03bcfe;
          border-radius: 5px;
        }
        .el-textarea__inner::-webkit-scrollbar-track {
          background: #223e87;
          border-radius: 2px;
        }
      }
    }
  }
  .btn-box {
    height: 0.36rem;
    margin-top: 0.33rem;

    .save-btn {
    }
    .cancel-btn {
      margin-left: 0.18rem;
    }
  }
}
</style>
<style lang="scss">
.plan-management-popup-box {
  .el-table__body-wrapper {
    height: calc(100% - 0.4rem);
    overflow-y: auto;
  }
  .el-input__prefix {
    left: 0.12rem;
  }
}
</style>

